<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar title="个人中心"></title-bar>
		<view class="page-content common-page-content" :style="{ minHeight: systemInfo.minHeight }">
			<view class="head-layout">
				<view class="header-image">
					<image :src="headPortrait" class="item-img"></image>
					<image mode="aspectFit" class="item-bg"></image>
				</view>
				<view class="info-layout" v-if="user.id">
					<text class="name-text">{{ user.nickName }}</text>
					<text class="id-text">{{ 'ID: ' + user.id }}</text>
				</view>
				<view v-else class="info-layout"><text class="tip" @click="toLogin()">登录/注册 ></text></view>
				<image v-if="user.id" @click="toUpdateInfo()" class="icon-edit"></image>
			</view>
			<view class="menu-item" v-for="(item, index) in menuList" @click="menuClick(item)" :key="index">
				<image :src="item.thumb"></image>
				<text>{{ item.title }}</text>
			</view>
			<button open-type="contact" class="contact"><common-button title="联系客服"></common-button></button>
			<view class="common-bottom-bg" mode="aspectFit"></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
	data() {
		return {
			imageUrl: process.env.NODE_ENV === 'development' ? this.$config.imageUrl.dev : this.$config.imageUrl.pro,
			menuList: [
				{
					title: '我管理的纪念馆',
					to: '/memorial/pages/memorial-hall-list',
					link: 'navigateTo',
					thumb: 'https://sitiantech.com/memorial-hall/profile/static/image/personal/icon_personal_edit.svg?' + Math.random()
				},
				{
					title: '我关注的纪念馆',
					to: '/memorial/pages/follow-memorial-hall',
					link: 'navigateTo',
					thumb: 'https://sitiantech.com/memorial-hall/profile/static/image/personal/icon_personal_follow.svg?' + Math.random()
				}
			]
		};
	},
	computed: {
		...mapState({
			user: state => state.user.info,
			systemInfo: state => state.app.systemInfo
		}),
		/* 获取头像 */
		headPortrait() {
			if (this.user.headPortrait) {
				return this.user.headPortrait.indexOf('http') != -1 ? this.user.headPortrait : this.imageUrl + this.user.headPortrait;
			}
			return '';
		}
	},
	methods: {
		...mapActions(['getUserInfo']),
		/* 菜单点击监听 */
		menuClick(item) {
			if (!uni.getStorageSync('Authorization')) {
				uni.navigateTo({
					url: '/pages/auth/auth-user'
				});
				return;
			}
			if (item.link == 'navigateTo') {
				uni.navigateTo({
					url: item.to
				});
			} else if (item.link == 'switchTab') {
				uni.switchTab({
					url: item.to
				});
			}
		},
		/* 跳转个人中心修改页面 */
		toUpdateInfo() {
			uni.removeStorageSync('temp-nickname');
			uni.navigateTo({
				url: '/personal/pages/update-info'
			});
		},
		/* 跳转认证页面 */
		toLogin() {
			uni.navigateTo({
				url: '/pages/auth/auth-user'
			});
		}
	},
	onShow() {
		if (uni.getStorageSync('Authorization')) {
			this.getUserInfo();
		}
	}
};
</script>

<style lang="scss" scoped>
@import './personal.scss';
</style>
